<template>
  <div class="product-banner" >
    <div class="loading-wrapper" v-if="!images.length">
      <me-loading/>
    </div>
    <me-banner v-else="images.length">
      <swiper-slide
        v-for="(item, index) of images"
        :key="index">
        <img :src="item" alt="" class="img">
      </swiper-slide>
    </me-banner>
  </div>
</template>
<script>
import meBanner from '@/base/me-banner'
import meLoading from '@/base/me-loading'
export default {
  name: 'productBanner',
  components: {
    meBanner,
    meLoading
  },
  props: {
    images: Array
  }
}
</script>
<style lang="stylus">
.product-banner
  width 100%
  height 0
  padding-bottom 100%
  position relative
  .loading-wrapper
    display flex
    align-items center
    justify-content center
    position absolute
    width 100%
    top 50%
    transform translateY(-50%)   
  .img
    width 100%
</style>
